import React from 'react';

import {
  StyleSheet, View, Text,
} from 'react-native';

export default ({ dotColor, title, text }) => (
  <View style={styles.info_container}>
    <View style={styles.info_titleContainer}>
      <Text style={[styles.info_badge, { backgroundColor: dotColor }]} />
      <View>
        <Text style={styles.info_title}>
          {title}
        </Text>
      </View>
    </View>
    <View>
      <Text style={styles.info_text}>
        {text}
      </Text>
    </View>
  </View>
);

const styles = StyleSheet.create({
  info_container: {
    position: 'absolute',
    bottom: 120,
    left: 20,
    zIndex: 1,
  },
  info_titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  info_title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
  },
  info_text: {
    fontSize: 16,
    color: 'white',
    marginLeft: 30,
  },
  info_badge: {
    marginRight: 10,
    borderStyle: 'solid',
    borderColor: '#ffffff',
    borderWidth: 2,
    width: 20,
    height: 20,
    borderRadius: 10,
  },
});
